<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head::common_header">
</head>
<body>
<div th:replace="header :: header"></div>
<!-- 首页视频banner区 -->

<!-- 预订部分 -->



<div id="tip" class="login-form-container">
    <i class="el-icon-close close-icon" id="tipClose"></i>
    <form id="order-form">
        <h3>You confirm to book this order？</h3>
        <input type="submit" value="confirm" class="btn">
    </form>
</div>

<!-- 套餐部分 -->

<section class="packages" id="packages">
    <h1 class="heading">
        <span>p</span>
        <span>a</span>
        <span>c</span>
        <span>k</span>
        <span>a</span>
        <span>g</span>
        <span>e</span>
        <span>s</span>
    </h1>

    <div class="box-container">
        <div class="box" th:each="item:${list}">
            <img th:src="${item.imgPath}" th:onclick="'viewDetail(\'' + ${item.id} + '\')'" alt="">
            <div class="content">
                <h3 th:text="${item.name}"> ChangJiangDaQiao </h3>
                <p th:text="${item.description}">Nam exercitationem commodi et ducimus quia in dolore animi sit mollitia
                    amet id quod eligendi. Et
                    labore harum non nobis ipsum eum molestias mollitia et corporis praesentium a laudantium
                    internos.。</p>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price"><span th:text="${'$'+item.realPrice}">$90.00</span> <span
                        th:text="${'$'+item.originPrice}">$120.00</span></div>
                <a href="#" class="btn" th:onclick="'bookNow(\'' + ${item.id} + '\')'">book now</a>
            </div>
        </div>
    </div>
</section>


<!-- 底部 -->

<div th:replace="footer :: footer"></div>


<script th:inline="javascript">
    var user = [[${user}]]
    var routeId  = 0;
    let tip = document.querySelector('#tip');
    let tipClose = document.querySelector('#tipClose');
    $('#order-form').submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为
        $.ajax({
            type: "post",
            url: "/bookNow",
            data: {
                "routeId": routeId,
            },
            success: function (data) {
                iziToast.show(
                    {
                        position: 'topCenter',
                        title: 'info',
                        message: 'successful booking',
                        color: 'green'
                    }
                )
                tip.classList.remove("active");


            }
        })
    })


    function viewDetail(id){
        window.location.href = "/detail?id="+id;
    }


    function bookNow(id) {
        if (user && user.email) {
            routeId = id;
            tip.classList.add("active")
            tipClose.addEventListener("click",()=>{
                tip.classList.remove("active")
            })

        } else {
            iziToast.show(
                {
                    position: 'topCenter',
                    title: 'info',
                    message: 'please login!',
                    color: 'red'
                }
            )

        }
    }

</script>


</body>
</html>
